﻿<template>
  <div class="equipment-storage-container">
    <!-- 搜索栏 -->
    <avue-table-search
      :option="searchOption"
      v-model="searchEquipmentParams"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    >
    </avue-table-search>
    <base-table-card>
      <template #header-right>
        <el-button type="primary" class="add-btn" @click="handleOpenUpload">导入SN</el-button>
      </template>
      <template #header-left>
        <el-tabs v-model="orderStatus" class="demo-tabs" @tab-change="handleTabClick">
          <el-tab-pane label="未租赁" :name="0"></el-tab-pane>
          <el-tab-pane label="租赁中" :name="1"></el-tab-pane>
          <el-tab-pane label="已买断" :name="2"></el-tab-pane>
        </el-tabs>
      </template>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadTableSearch"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #status="{ row }">
          <span>{{ row.status === 1 ? "已激活" : "未激活" }}</span>
        </template>
        <template #menu="{ row }">
          <el-button link type="primary" @click="handleSynchronization(row.id)">同步状态</el-button>
        </template>
      </avue-crud>
    </base-table-card>
    <upload-modal :visble="uploadShow" @hide="uploadShow = false" />
  </div>
</template>

<script setup>
  import { searchOption, tableOption } from "@/crudOption/equipment-storage/search.js";

  import UploadModal from "./componets/UploadModal.vue";
  // 上传弹窗显示
  const uploadShow = ref(false);
  // 当前tab
  const orderStatus = ref(0);
  // tab切换
  const handleTabClick = () => {
    loadGetTableData();
  };
  // 打开上传弹窗
  const handleOpenUpload = refresh => {
    uploadShow.value = true;
    if (refresh) {
      loadGetTableData();
    }
  };
  onMounted(() => {
    // 获取表格数据
    loadGetTableData();
  });
  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchEquipmentParams,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.getEquipmentList,
    getParamsFormat: params => {
      const searchParams = { ...params, orderStatus: orderStatus.value };
      if (searchParams?.addDate?.length) {
        searchParams.startTime = `${params.addDate[0]} 00:00:00`;
        searchParams.endTime = `${params.addDate[1]} 23:59:59`;
      }
      if (searchParams?.editDate?.length) {
        searchParams.updateStartTime = `${params.editDate[0]} 00:00:00`;
        searchParams.updateEndTime = `${params.editDate[1]} 23:59:59`;
      }
      if (searchParams?.editDate?.length) {
        searchParams.updateStartTime = `${params.editDate[0]} 00:00:00`;
        searchParams.updateEndTime = `${params.editDate[1]} 23:59:59`;
      }
      if (searchParams.status === 3) {
        searchParams.status = "";
      }
      delete searchParams.addDate;
      delete searchParams.editDate;
      return searchParams;
    },
  });
  // 同步状态
  const handleSynchronization = id => {
    Api.product.equipmentSynchronization({ id }).then(() => {
      $msg.success("操作成功");
      loadGetTableData();
    });
  };
</script>

<style lang="scss" scoped>
  .equipment-storage-container {
    padding: 16px;
  }
</style>
